import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  // 创建history模式的路由
  // history: createWebHistory(),
  // 创建hash模式的路由
  history: createWebHashHistory(),
  // 配置路由规则
  routes: [
    {
      path: "/",
      name: "Home",
      component: () => import('../views/Home.vue'),
      children:[
        {
          path: "/",
          component: () => import('../views/Home/HomeLogin/Latest.vue')
        },
        {
          path: "/latest",
          component: () => import('../views/Home/HomeLogin/Latest.vue')
        },

        {
          path: "/popular",
          component: () => import('../views/Home/HomeLogin/Popular.vue')
        }
      ]
    },
    {
      path: "/about",
      name: "About",
      component: () => import('../views/About.vue'),
    },
    {
      path: "/contact",
      name: "Contact",
      component: () => import('../views/Contact.vue'),
    },
    {
      // path: '/SeafishList',
      path: '/SeafishList/:type',
      name: 'SeafishList',
      component: () => import('../views/SeafishList.vue'),
    },
    {
      path: '/fish/:id',
      name: 'FishDetails',
      component: () => import('../views/SeafishList/FishDetails.vue'),
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('../components/Login.vue'),
    },
    {
      path: '/register',
      name: 'Register',
      component: () => import('../components/Register.vue'),
    },
    {
      path: '/search',
      name: 'Search',
      component: () => import('../components/Search.vue'),
    },
    {
      path: '/userinfo',
      name: 'UserInfo',
      component: () => import('../views/UserInfo.vue'),
      beforeEnter: (to, from, next) => {
        const username = localStorage.getItem('username');
        if (username) {
          next();
        } else {
          next({ name: 'Login' });
        }
      },
      children:[
        {
          path: "/upload",
          component: () => import('../views/UserInfo/Upload.vue')
        },
        {
          path: "/modellist",
          component: () => import('../views/UserInfo/ModelList.vue')
        }
      ]
    }
  ],
})

export default router;
